<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style type="text/css">
			p.place {
				margin: 10px;
				color: #000000;
				font-size: 16px;
				text-align: center;
				height: 35px;
			}
			
			#reset-btn {
				margin: 0 5px;
			}
			
			#map {
				width: 100%;
				position: fixed;
				top: 150px;
				bottom: 0;
				line-height: 200px;
				text-align: center;
				background: #efeff4;
			}
			
			.mui-input-row {
				height: 40px;
			}
			
			.mui-input-row input {
				width: 60%;
				margin-left: 5%;
				border: 1px solid #FEB406;
				border-radius: 5px 0 0 5px;
			}
			
			.mui-input-row button.btn-main {
				display: inline-block;
				height: 40px;
				margin: 0;
				border-radius: 0 5px 5px 0;
				border: none;
				width: 30%;
			}
			
			button.btn-main {
				position: absolute;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav bar-inverse">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">位置</h1>
			<a id="back" class="mui-pull-right">确定</a>
			<a id="reset-btn" class="mui-icon mui-pull-right iconfont">&#xe603;</a>
		</header>
		<div class="mui-content">
			<p class="place"><span id="place"></span></p>
			<form class="mui-input-row">
				<input type="text" id="search" placeholder="搜索地址" />
				<button class="btn-main" id="searchbtn"><i class="iconfont">&#xe743; </i> 搜索</button>
			</form>
			<div id="map">地图加载中...</div>
		</div>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var map = null,
				marker = null,
				writeInfoPage = null,
				thisLocation = null,
				place = document.getElementById("place");
			
			mui.plusReady(function() {
				editPage = plus.webview.getWebviewById('pages/edit.html');
				map = new plus.maps.Map("map");
				map.getUserLocation(now);
				plus.nativeUI.closeWaiting();
				//返回点击位置
//				map.onclick = function(point) {
//					thisLocation = point;
//					mark(point);
//					place.innerHTML = '定位中';
//					plus.maps.Map.reverseGeocode(point, {}, function(event) {
//						place.innerHTML = event.address;
//					}, failCB)
//				}
				
				// 拖动选点
				map.onstatuschanged = function(e) {
					thisLocation = e.center;
					mark(thisLocation);
					place.innerHTML = '定位中';
					plus.maps.Map.reverseGeocode(thisLocation, {}, function(event) {
						place.innerHTML = event.address;
					}, failCB)
				}

				//刷新
				mui('header').on('tap', '#reset-btn', function() {
					map.getUserLocation(now);
				})
				
				mui('header').on('tap', '#back', function() {
					writeInfoPage = plus.webview.currentWebview().opener();
					mui.fire(writeInfoPage, 'changeLocation', {
						address : place.innerHTML,
						location : thisLocation
					})
					mui.back();
				})
				//搜索
				mui('.mui-input-row').on('tap', '#searchbtn', function() {
					var searchP = document.getElementById("search").value;
					if(searchP) {
						place.innerHTML = '搜索中';
						var address = document.getElementById("search").value;
						plus.maps.Map.geocode(address, {}, function(e) {
							mark(e.coord);
							plus.maps.Map.reverseGeocode(e.coord, {}, function(event) {
								thisLocation = e.coord;
								place.innerHTML = event.address;
							}, failCB)
							map.centerAndZoom(e.coord, 18);
						}, failCB)
					} else {
						mui.toast('搜索地点不能为空');
					}
				})
			})
			
			function mark(point) {
				// 移除之前的标记
				map.removeOverlay(marker);
				map.setCenter(point);
				marker = new plus.maps.Marker(point);
				marker.setIcon("../images/icon/marker.png");
				map.addOverlay(marker);
			}

			function now(state, point) {
				if(0 == state) {
					thisLocation = point;
					map.centerAndZoom(point, 18);
					mark(point);
					//返回当前位置
					plus.maps.Map.reverseGeocode(point, {}, function(event) {
						place.innerHTML = event.address;
					}, failCB)
				} else {
					mui.toast('定位信息获取失败，请稍后重试');
				}
			}

			function failCB(error) {
				mui.toast('定位信息获取失败，请稍后重试');
				console.log(JSON.stringify(error));
			}
		</script>
	</body>

</html>